<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="./jQuery.js"></script>
    <script src="./swiper-3.4.2.min.js"></script>
    <link rel="stylesheet" href="./swiper-3.4.2.min.css">
    <title>Document</title>
</head>
<style>
    .swp {
        width: 500px;
        margin: 0 auto;
    }

    .swp img {
        width: 100%;
    }
</style>

<body>
    <div class="swiper-container swp">
        <div class="swiper-wrapper spp">
            <!-- <div class="swiper-slide"><img src="${item.imgsrc}" alt="">1</div>
            <div class="swiper-slide"><img src="${item.imgsrc}" alt="">2</div>
            <div class="swiper-slide"><img src="${item.imgsrc}" alt="">3</div> -->
        </div>
    </div>
</body>
<script>
    $.ajax({
        type: 'get',
        url: 'http://120.48.109.174:8081/home/swiper',
        success(mes) {
            let data = mes.body
            data.forEach(item => {
                let str = `
                 <div class="swiper-slide">
                    <img src="http://120.48.109.174:8081${item.imgSrc}" alt="">
                </div>
                 `
                $('.spp').append(str)
            });
            var mySwiper = new Swiper('.swiper-container', {
                autoplay: 2000,//可选选项，自动滑动
            });
        }
    })
</script>


</html>